<script setup>
import axios from "axios";
import { nextTick, ref, reactive } from "vue";

let tableData = reactive([]);


async function getTableData() {
  let newArr = await axios({
    url: "/api/costList",
    method: "get",
  });
  tableData.push(...newArr.data.data.list);
}
getTableData()
</script>


<template>
  <div class="right_BOX">
    <el-table
      :data="tableData"
      default-expand-all
      :cell-style="{border:'none'}"
    >
    <el-table-column type="expand" width="10">
      <template #default="props">
        <div class="progress-BOX">
          <div class="index_text">{{ props.$index+1 }}</div>
          <div class="progress">
          <el-progress :text-inside="true"  :stroke-width="26" :percentage="Math.floor(props.row.proportion*100)" :status="Math.floor(props.row.proportion*100)<30?'success':30<Math.floor(props.row.proportion*100)<70?'':'warning'"/>
        </div>
      </div>
      </template>
    </el-table-column>
    <el-table-column width="60"  label="序号" :index="indexMethod" />
      <el-table-column  prop="name" label="费用类型" align="left"/>
      <el-table-column prop="amount" label="费用金额" align="right">
        <template #default="scoped">
          <div class="table_amount">
            {{ parseFloat(scoped.row.amount/10000) }}万元
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="proportion" label="占比"  align="center">
        <template #default="scoped">
            {{ Math.floor(scoped.row.proportion*100).toFixed(2)}}%
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.right_BOX{
  padding: 1rem 2rem;
  .progress-BOX{
    border: none;
    display: flex;
    padding-left: 1rem;
    margin-top: -1rem;
    .index_text{
      width: 2.5rem;
      height: 2.5rem;
      text-align: center;
      line-height: 3em;
      background-color: #edf6fe;
      border-radius: 50%;
      margin-top: -1rem;
    }

    .progress{
      margin-left: 1.5rem;
      flex: 1;
    }
  }

  .table_amount{
    color: #409ffd;
  }
}
::v-deep .el-table__expand-icon{
  color: transparent !important;
  visibility: hidden !important;

}

::v-deep .el-table__expanded-cell{
    border: none !important;
}

</style>
